<template>
  <div class="server-error">
    <div>
      <div class="icon">
        <i class="el-icon-s-tools"></i>
      </div>
    </div>
    <div align="center">
      <span class="message">服务器维护中，请稍后再试..... <span class="tip">(<b>{{ seconds }}</b>秒后自动刷新)</span> </span>
    </div>

  </div>
</template>

<script>

export default {
  name: "ServerError",
  data:function () {
    return {
      seconds:10,
    }
  },
  mounted() {
    setInterval(()=>{
      this.seconds--
      if (this.seconds===0){
        location.reload()
      }
    },1000)
  }
}
</script>

<style scoped>
  .server-error{ background: #494646; height: 300px; max-width: 1000px; width: 90%; margin: 50% auto; border-radius: 10px; padding: 10px; text-align: center; justify-content: center; display: flex;align-items: center; color: #EEEEEE}
  .server-error .icon{ display: inline-block; width: 100px; height: 100px; margin-right: 10px;}
  .server-error .icon i{font-size: 90px;}
  .server-error .message{ font-size: 24px;}
  .server-error .tip{ font-size: 13px; color: #f3b949
  }
</style>
